<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>

    <script
      crossorigin
      src="https://unpkg.com/react@17.0.2/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"
    ></script>

    <script src="./babel.min.js"></script>

    <script type="text/babel">
      const arr = ['a', 'b', 'c', 'd', 'e', 'f']
      // const newArr = []
      // arr.forEach((item) => {
      //   newArr.push(<li>{item}</li>)
      // })
      // let num = 0
      const newArr = arr.map((item, index) => (
        <li key={item}>
          <h1>{item}</h1>
        </li>
      ))
      const ul = <ul>{newArr}</ul>
      ReactDOM.render(ul, document.getElementById('root'))
    </script>
  </body>
</html>
